<!DOCTYPE html>
<html style="width: 100%;height: 100%;margin: 0;padding: 0">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <title>上传身份证</title>
    　
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
	#photo{
            height:200px;
            width:200px;
        }
    </style>
    <script language="javascript">
        function 分享按钮调用方法名(){
            if(判断如果是android设备){
                window.android.ryShare(分享图片,标题,副标题,分享地址);
            }else if(判断如果是IOS设备){
                 window.webkit.messageHandlers.ryShare.postMessage(分享图片,标题,副标题,分享地址);
            }
        }

    </script>

</head>
<body style="width: 100%;height: 100%;margin: 0;padding: 0">
<div class="sctp">
    <img id="photo" alt=""/>
    <input class="iptsc" type="file" name="file" id="file"/>
    <input type="hidden" id="fileVal">
</div>
<script type="text/javascript">
    $(function () {
        function chooseImage(fileid, imgid, fileValId) {
            var fileObj = document.getElementById(fileid);
            if (typeof (fileObj) == "undefined" || fileObj.files.length == 0) {
                 console.log('file ' + fileid + ' not exists');
                 alert("无图片")
                 return;
            }
            var file = fileObj.files[0];
            alert(file.size+"--"+file.type);
            var reader = new FileReader();
           reader.readAsDataURL(file);
           reader.onload = function (event) {
            var blob = new Blob([event.target.result]);
            var blobURL = window.URL.createObjectURL(blob); // and get it's URL
            var imgObj = document.getElementById(imgid);
                if (typeof (imgObj) != "undefined") {
                    imgObj.setAttribute("src", blobURL);
                }
            };
            reader.onerror = function(e) {
				console.log('onerror ---> ', e)
			}
			 reader.onprogress = function(e) {
				console.log('onprogress ---> ', e)
			}
        };
        $('#file').on('change', function () {
            chooseImage('file', 'photo', 'fileVal');
        });
    });

</script>
</body>
</html>
